<template>
  <div class="commissionSource">
    <!-- 佣金来源 -->
    <h6 class="hLabel">佣金来源</h6>

    <ele-pro-table ref="table"
                   :columns="columns"
                   :datasource="datasource"
                   :disabled="false"
                   :toolbar="false"
                   cache-key="systemUserTable">

      <!-- 名称 -->
      <template v-slot:realName="{ row }">
        <div class="realNameStyle display ">
          <img class="avaterName"
               :src="row.avater"
               alt="">
          <div class="flex-column-start">
            <div>{{ row.orderName }}</div>

          </div>
        </div>
      </template>

    </ele-pro-table>

  </div>
</template>
	<script>

import { commissionSourceList } from '../constant/constant'
export default {
  name: 'commissionSource',
  components: {

  },
  data () {
    return {
      commissionSourceList,


      // 表格列配置
      columns: [

        {
          prop: 'orderingInformation',
          label: '订单信息',
          sortable: 'custom',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 160,
          slot: 'realName',
        },
        {
          prop: 'orderMoney',
          label: '订单金额',
          sortable: 'custom',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 110,
          slot: 'applicationsAmount'
        },
        {
          prop: 'commissionEarned',
          label: '所得佣金',
          sortable: 'custom',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 110,
          slot: 'reflectionType'
        },
        {
          prop: 'platformCommission',
          label: '平台抽佣',
          sortable: 'custom',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 150,

        },
        {
          prop: 'createTime',
          label: '时间',
          sortable: 'custom',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 110,
          slot: 'currentState'
        },

      ],
      // 表格选中数据

      drawerReflectBoolen: false
    };

  },
  computed: {
    // 是否开启响应式布局
    styleResponsive () {
      return this.$store.state.theme.styleResponsive;
    },
    // 服务状态
    currentStateType () {
      return function (currentStateType) {
        // console.log(applyType)
        if (currentStateType == '1') {
          return {
            status: '体现中',
            type: 'success'
          };

        } else if (currentStateType == '2') {
          return {
            status: '已体现',
            type: ''
          };

        } else if (currentStateType == '3') {
          return {
            status: '已驳回',
            type: 'danger'
          };

        }
      };
    },
    // 实名认证
    reflectionType () {
      return function (reflectionType) {
        if (reflectionType == '1') {
          return {
            status: '微信',
            type: 'success'
          };
        }
        else {
          return {
            status: '支付宝',
            type: ''
          };
        }
      };
    },
  },
  methods: {
    // 点击查看详情弹出详情抽屉
    viewDetail () {
      // 用户余额管理
      this.drawerReflectBoolen = !this.drawerReflectBoolen
      // 评论 
      //   this.drawComment = !this.drawComment
    },

    /* 表格数据源 */
    datasource ({ page, limit, where, order }) {
      if (!where.deleted) where.deleted = 0
      return Promise.resolve({ count: 2, list: commissionSourceList });
    },
    /* 刷新表格 */
    reload (where) {
      this.$refs.table.reload({ page: 1, where: where, types: 1 });
    },

    /* 删除 */
    remove (row) {
      const loading = this.$loading({ lock: true });
      mealDelete({ ids: [row.id] })
        .then((msg) => {
          loading.close();
          this.$message.success(msg);
          this.reload();
        })
        .catch((e) => {
          loading.close();
          this.$message.error(e.message);
        });
    },
    /* 批量删除 */
    removeBatch () {
      if (!this.selection.length) {
        this.$message.error('请至少选择一条数据');
        return;
      }
      this.$confirm('确定要删除选中的套餐吗?', '提示', {
        type: 'warning'
      })
        .then(() => {
          const loading = this.$loading({ lock: true });
          removeMeal({ ids: this.selection.map((d) => d.id) })
            .then((msg) => {
              loading.close();
              this.$message.success(msg);
              this.reload();
            })
            .catch((e) => {
              loading.close();
              this.$message.error(e.message);
            });
        })
        .catch(() => { });
    },
  }

};
	</script>
	<style lang="less" scoped>
.commissionSource {
  .hLabel {
    margin: 15px 0 20px;
    font-weight: 700;
    &::before {
      content: '';
      display: inline-block;
      vertical-align: top;

      margin-right: 10px;
      height: 23px;
      width: 4px;
      background-color: #1e6ceb;
    }
  }
  .realNameStyle {
    .avaterName {
      width: 52px;
      height: 52px;

      vertical-align: middle;
      margin-right: 5px;
    }
    .technicianName {
      color: #1890ff;
      font-size: 12px;
      font-style: normal;
      font-weight: 400;
    }
  }
  .orderrowinfo {
    width: 100%;
    display: flex;
    margin-left: 15px;
    padding: 30px;
    height: 50px;
    align-items: center;
    background-color: #f8f8f8;
    .orderNumber,
    .createDate,
    .buyName,
    .iphone {
      margin-right: 40px;
      color: #000;
      font-family: Inter;
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
    }
  }
}
</style>